<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-table :data="os" style="width: 100%">
          <el-table-column label="操作系统信息" align="center">
            <el-table-column prop="name" label="属性"/>
            <el-table-column prop="value" label="值"/>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-table :data="jvm" style="width: 100%">
          <el-table-column label="JVM信息" align="center">
            <el-table-column prop="name" label="属性"/>
            <el-table-column prop="value" label="值"/>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row class="margin-top-50">
      <el-col :span="12"><div id="memoryReport"/></el-col>
      <el-col :span="12"><div id="cpuReport"/></el-col>
    </el-row>
  </div>
</template>
<script>
import { ConfigService } from '@/api/SystemService'
import echarts from 'echarts'

export default {
  name: 'SystemParams',
  data() {
    return {
      os: [], jvm: [], memoryReport: undefined, cpuReport: undefined,
      memoryOption: {
        title: { text: '操作系统内存分析' },
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }},
        legend: { data: ['总内存', '已使用', '剩余内存'] },
        xAxis: [{ type: 'category', data: ['内存', '交换区'] }],
        yAxis: [{ type: 'value', name: '大小（G）' }],
        series: [
          { name: '总内存', type: 'bar', data: [] },
          { name: '已使用', type: 'bar', data: [] },
          { name: '剩余内存', type: 'bar', data: [] }
        ]
      },
      cpuOption: {
        title: { text: '操作系统CPU分析', left: 'center' },
        tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}%' },
        legend: { orient: 'vertical', left: 'left', data: ['总使用率', '当前空闲率', '当前错误率', '当前等待率', '系统使用率', '用户使用率'] },
        series: [
          { name: 'CPU', type: 'pie', radius: '55%', center: ['50%', '60%'],
            data: [],
            emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }}
          }
        ]
      }

    }
  },
  mounted() {
    this.memoryReport = echarts.init(document.getElementById('memoryReport'))
    this.memoryReport.setOption(this.memoryOption)

    this.cpuReport = echarts.init(document.getElementById('cpuReport'))
    this.cpuReport.setOption(this.cpuOption)

    window.addEventListener('resize', function() { this.memoryReport.resize() })
    window.addEventListener('resize', function() { this.cpuReport.resize() })

    this.loadParams()
  },
  methods: {
    loadParams() {
      ConfigService.getSystemParams().then(result => {
        if (result) {
          const osData = result['os']
          if (osData) {
            this.os.push({ name: '服务器名称', value: osData.computerName })
            this.os.push({ name: '服务器IP', value: osData.ip })
            this.os.push({ name: '操作系统', value: osData.osName })
            this.os.push({ name: '系统架构', value: osData.osArch })
            this.os.push({ name: '系统版本', value: osData.osVersion })
            this.os.push({ name: '时区', value: osData.timeZone })
          }

          const jvmData = result['jvm']
          if (jvmData) {
            this.jvm.push({ name: 'JavaHome', value: jvmData.javaHome })
            this.jvm.push({ name: 'Java版本', value: jvmData.javaVendor + ' ' + jvmData.javaVersion })
            this.jvm.push({ name: 'JVM可使用总内存', value: jvmData.totalMemory })
            this.jvm.push({ name: 'JVM可使用剩余内存', value: jvmData.freeMemory })
            this.jvm.push({ name: 'JVM运行时长', value: jvmData.runTime + '分' })
            this.jvm.push({ name: 'JVM启动时间', value: jvmData.startTime })
          }

          const memoryData = result['memory']
          if (memoryData) {
            this.memoryOption.series[0].data = [this.convertToG(memoryData.total), this.convertToG(memoryData.swapTotal)]
            this.memoryOption.series[1].data = [this.convertToG(memoryData.used), this.convertToG(memoryData.swapUsed)]
            this.memoryOption.series[2].data = [this.convertToG(memoryData.free), this.convertToG(memoryData.swapFree)]
            this.memoryReport.setOption(this.memoryOption)
          }

          const cpuData = result['cpu']
          if (cpuData) {
            this.cpuOption.series[0].data = [
              { value: parseFloat(cpuData.combinedRate), name: '总使用率' },
              { value: parseFloat(cpuData.idleRate), name: '当前空闲率' },
              { value: parseFloat(cpuData.niceRate), name: '当前错误率' },
              { value: parseFloat(cpuData.waitRate), name: '当前等待率' },
              { value: parseFloat(cpuData.sysRate), name: '系统使用率' },
              { value: parseFloat(cpuData.userRate), name: '用户使用率' }]
            this.cpuOption.title.subtext = '逻辑处理器' + cpuData.total + '个'
            this.cpuReport.setOption(this.cpuOption)
          }
        }
      })
    },
    convertToG(size) {
      return (size / Math.pow(1024.00, 3)).toFixed(2)
    }
  }
}
</script>
<style scoped>
  #memoryReport{width: 100%;height: 600px;margin: 0 auto;}
  #cpuReport{width: 100%;height: 600px;margin: 0 auto;}
</style>
